<template>
  <div>
    <!-- 关联登录组件 -->
    <div v-if="showLogin">
      <!-- 接收子组件传递的信息 -->
      <loginWindow @changeShow="getModel(arguments)"></loginWindow>
    </div>

    <div class="show">
      <div class="button1">
    		<div class="btn1 right" @click="recall()">撤销</div>
    		<div class="btn0" @click="reset()">清零</div>
    	</div>
      <div class="mark-text">当前分数</div>
      <div class="mark">{{ mark }}</div>
    </div>

    <div class="row">
      <div class="button right" @click="addMark(1)">+ 1</div>
      <div class="button left" @click="addMark(-1)">- 1</div>
    </div>

    <div class="row">
      <div class="button right" @click="addMark(+5)">+ 5</div>
      <div class="button left" @click="addMark(-5)">- 5</div>
    </div>
  </div>
</template>

<script>
import { showSuccess, showModel, post, get } from '../../util'
import loginWindow from '../../components/loginWindow'
export default {
  components: {
    loginWindow
  },
  data () {
    return {
      mark: 0,
      userinfo: {},
      // 默认没有登录弹窗
      showLogin: false
    }
  },
  methods: {
    async addMark (add) {
      try {
        const data = {
          openid: this.userinfo.openId,
          add: add
        }
        await post('/weapp/createrecord', data)
        this.mark = this.mark + add
      } catch (e) {
        showModel('请求失败', '请稍后再试')
        console.log(e)
      }
    },
    getModel (val) {
      // 接收传递的第一个信息保存到showLogin里
      this.showLogin = val[0]
      // 接收传递的第一个信息保存到userinfo里
      this.userinfo = val[1]
      // 登录成功读取当前分数
      this.getCurrentMark()
    },
    // 读取当前总分
    async getCurrentMark () {
      try {
        const res = await get('/weapp/getmark', { openid: this.userinfo.openId })
        this.mark = res.mark
      } catch (e) {
        showModel('请求失败', '请刷新页面重试T_T')
      }
    },
    // 分数清零
    async resetMark () {
      if (this.mark !== 0) {
        try {
          // 向数据库里插入数据, 使用post
          await post('/weapp/resetmark', { openid: this.userinfo.openId })
          this.mark = 0
        } catch (e) {
          showModel('操作失败', '请稍后再试T_T')
        }
      }
    },
    // 清零提示框
    reset () {
      var that = this
      wx.showModal({
        content: '确定清零？',
        success: function (res) {
          if (res.confirm) {
            that.resetMark()
          }
        }
      })
    },
    // 分数撤销
    async recall () {
      try {
        const res = await post('/weapp/deleterecord', { openid: this.userinfo.openId })
        this.mark = res.mark
        showSuccess('撤销成功！')
      } catch (e) {
        showModel('操作失败', e.data.msg)
      }
    }
  },
  mounted () {
    const userinfo = wx.getStorageSync('userinfo')
    // 有用户信息则将信息保存在userinfo里
    if (userinfo.openId) {
      this.userinfo = userinfo
      console.log(this.userinfo)
    } else {
      // 用户没有登录，隐藏导航栏
      wx.hideTabBar()
      this.showLogin = true
    }
  },
  // 每次切换到首页自动获取当前分数
  onShow () {
    this.getCurrentMark()
  },
  // 下拉刷新
  onPullDownRefresh () {
    // 获取当前分数
    this.getCurrentMark()
    // 停止下拉刷新
    wx.stopPullDownRefresh()
  },
  // 分享页面
  onShareAppMessage () {
    return {
      title: `神器在手，自律我有！
              想自律，我推荐自律君~`,
      path: '/pages/index/main'
    }
  }
}
</script>

<style scoped>
.show {
  text-align: center;
  height: 266px;
  background: #ea5149;
  margin-bottom: 5px;
  color: #ffffff;
}
.mark-text {
    font-size: 20px;
    padding: 28px;
}
.mark {
    font-size: 88px;
}
.button1{
		margin:0 10px;
		height: 30px;
		line-height:30px;
		text-align:center;
		font-size: 15px;
		font-weight:bold;
		background:#EA5149;
  }
  .btn0{
		width: 60px;
		border-radius: 15px;
    border:1px dashed #feb600;
    margin-top: 10px;
    position: absolute;
    }
  .btn1{
		width: 60px;
		border-radius: 15px;
    border:1px dashed #feb600;
    margin-top: 10px;
	}

.row {
  margin: 40px 56px;
}
.button {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 20%;
    border: none;
    text-align: center;
    font-size: 25px;
    color: #ffffff;
    font-weight: bold;
}
.right {
  background: #ea5149;
  float: right;
}
.left {
  background: #feb600;
  margin-right: 80px;
}

</style>
